<template>
  <div>
    <button :class="['link-button', type ? type : 'default']" @click="onClick">
      <slot></slot>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  methods: {
    onClick () {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.link-button {
  border: none;
  color: #fff;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.1s all;
}
.default {
  color: #606266;
  background-color: transparent;
  border: 1px solid #dcdfe6;
}
.default:hover {
  color: #198cff;
  background-color: #ecf5ff;
  border-color: #c6e2ff;
}
.default:active {
  border-color: #198cff;
}
/* 主要按钮 */
.primary {
  background-color: #198cff;
}
.primary:hover {
  background-color: #409eff;
}
.primary:active {
  background-color: #198cff;
}
/* 成功按钮 */
.success {
  background-color: #43bd07;
}
.success:hover {
  background-color: #67c23a;
}
.success:active {
  background-color: #43bd07;
}
/* 信息按钮 */
.info {
  background-color: #757575;
}
.info:hover {
  background-color: #909399;
}

.info:active {
  background-color: #757575;
}
/* 警告按钮 */
.warning {
  background-color: #bd8026;
}
.warning:hover {
  background-color: #e6a23c;
}
.warning:active {
  background-color: #bd8026;
}
/* 失败按钮 */
.danger {
  background-color: #e75151;
}
.danger:hover {
  background-color: #f56c6c;
}
.danger:active {
  background-color: #e75151;
}
</style>
